import React, { Component, useRef, useState } from "react";
import "./index.scss";
import { Radio } from "antd";
// import type { RadioChangeEvent } from 'antd';

const App = () => {
  const [value1, setValue1] = useState(0);
  const [value, setValue] = useState(1);
  const [values, setValues] = useState(1);

  // let indexOrder = [5, 9, 6, 7, 2, 8, 3, 4, 1];

  let indexOrder={
    "东南":5,
    "南":9,
    "西南":6,
    "东":7,
    "中央":2,
    "西":8,
    "东北":3,
    "北":4,
    "西北":1
  }

  const state = {
    floor: value1, //楼层
    gate: value, //住宅门口
    season: values, //出生季节
  };

  // 楼层
  const handleGetInputValue = (e) => {
    setValue1(e.target.value);
  };

  // 住宅门口
  const onChange = (e) => {
    setValue(e.target.value);
  };

  // 出生季节
  const onChange1 = (e) => {
    setValues(e.target.value);
  };

  // 点击预测
  const handlePost = () => {
    const { floor, gate, season } = state;
    if (floor === 0) {
      alert("请输入楼层数！");
      return;
    }
    if (gate === 1) {
      alert("请输入方位！");
      return;
    }
    if (season == 1) {
      alert("请输入出生季节！");
      return;
    }
    let a=1;
    let timert= setInterval( ()=>{
      var i=Math.floor(Math.random() *9);
      var bloaks=document.querySelector(".blocks").childNodes;
      for(let w=0;w<9;w++){
        bloaks[w].style.backgroundColor="rgba(255, 255, 255, 0.13)"
      }
       bloaks[i].style.backgroundColor="#00bfff"
       a++;
      if(a==indexOrder[gate]){
        clearInterval(timert)
      }
    },500);
  };

  return (
    <div className="prediction">
      <h3>最吉方位预测（仅供娱乐）</h3>
      <div className="prediction1">
        <div className="prediction2">
          <div className="blocks">
            <div id="block1">东南</div>
            <div id="block2">南</div>
            <div id="block3">西南</div>
            <div id="block4">东</div>
            <div id="block5">中央</div>
            <div id="block6">西</div>
            <div id="block7">东北</div>
            <div id="block8">北</div>
            <div id="block9">西北</div>
          </div>
        </div>
        <div className="prediction3">
          <div className="prediction4">
            <label>
              楼层：
              <input
                type="number"
                value={value1}
                onChange={handleGetInputValue}
              />
            </label>
          </div>
          <div className="prediction5">
            <label>
              <span>住宅</span>
              门口朝向(出门时面向哪边，若开偏门也以正门为准)：
            </label>
            <br />
            <div className="prediction6">
              <Radio.Group onChange={onChange} value={value}>
                <Radio value="东">东</Radio>
                <Radio value="西北">西北</Radio>
                <Radio value="南">南</Radio>
                <Radio value="东北">东北</Radio>
                <br />
                <Radio value="西">西</Radio>
                <Radio value="西南">西南</Radio>
                <Radio value="北">北</Radio>
                <Radio value="东南">东南</Radio>
              </Radio.Group>
              <br />
            </div>
          </div>
          <div className="prediction7">
            <label>出生季节(立春到立夏之间为春季，余类推)：</label>
            <br />
            <Radio.Group onChange={onChange1} value={values}>
              <Radio value="春">春</Radio>
              <Radio value="夏">夏</Radio>
              <Radio value="秋">秋</Radio>
              <Radio value="冬">冬</Radio>
              <br />
            </Radio.Group>
          </div>
          <div className="input-group">
            <button id="bestLocation_submit" type="button" onClick={handlePost}>
              测一测
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
export default App;
